import React, { Component } from 'react';

import {
  View, Text, SafeAreaView, TouchableOpacity as Touch,
  Platform, StatusBar, StyleSheet, Animated,
} from 'react-native';

const statusBarHeight = StatusBar.currentHeight;

function SafeAreaView2 (props) {
  const { children } = props;
  return (
    <View style={SS.safe}>{children}</View>
  );
}

export const SafeArea = Platform.OS === 'ios' ? SafeAreaView : SafeAreaView2;

export default function NavBar (props) {
  const { back = true, icon, children, menu } = props;
  const { style = {}, backStyle = {}, textStyle = {} } = props;
  const { onBack } = props;

  const prefix = back
    ? (<Touch onPress={onBack} style={SS.bar_icon_back}><View style={SS.bar_icon_back_ico} /></Touch>)
    : (MayINeedHelp(icon) ? <Text style={{ ...backStyle }}>{icon}</Text> : icon);

  const layout = MayINeedHelp(children) ? <Text style={{ ...SS.bar_text_t, ...textStyle }}>{children}</Text> : children;
  const suffix = MayINeedHelp(menu) ? <Text>{menu}</Text> : menu;
  return (
    <SafeArea>
      <View style={{ ...SS.bar, ...style }}>
        <View style={SS.bar_icon}>{prefix}</View>
        <View style={SS.bar_text}>{layout}</View>
        <View style={SS.bar_icon}>{suffix}</View>
      </View>
    </SafeArea>
  );
}

export class MNavBar extends Component {
  state = {
    x: 0,
    y: 0,
    AScale: new Animated.Value(0),
  };

  componentDidMount () {
    const { AScale } = this.state;
    AScale.setValue(0);
  }

  onBack = (e) => {
    const { onBack } = this.props;
    const { AScale } = this.state;
    if (e.nativeEvent) {
      this.setState({ x: e.nativeEvent.locationX, y: e.nativeEvent.locationY });
    }
    AScale.setValue(0);
    Animated.timing(AScale, { toValue: 1, duration: 500, useNativeDriver: true }).start();
    window.setTimeout(() => {
      if (onBack && typeof onBack === 'function') onBack();
    }, 300);
  };

  render () {
    const { props, state, onBack } = this;
    const { back = true, icon, children, menu } = props;
    const { style = {}, backStyle = {}, textStyle = {} } = props;
    // const { onBack } = props;
    const { AScale, x, y } = state;

    const prefix = back
      ? (
        <View onTouchStart={onBack} style={SS.bar_icon_back}>
          <View style={SS.bar_icon_back_ico} />
          <Animated.View
            style={[
              SS.bar_icon_back_bg,
              { transform: [{ scale: AScale.interpolate({ inputRange: [0, 1], outputRange: [0, 2] }) }] },
              { opacity: AScale.interpolate({ inputRange: [0, 0.3, 1], outputRange: [0, 1, 0] }) },
              { left: x - 45 / 2, top: y - 45 / 2 },
            ]}
          />
        </View>
      )
      : (MayINeedHelp(icon) ? <Text style={{ ...backStyle }}>{icon}</Text> : icon);

    const layout = MayINeedHelp(children) ? <Text style={{ ...SS.bar_text_t, ...textStyle }}>{children}</Text> : children;
    const suffix = MayINeedHelp(menu) ? <Text>{menu}</Text> : menu;
    return (
      <SafeArea>
        <View style={{ ...SS.bar, ...style }}>
          <View style={SS.bar_icon}>{prefix}</View>
          <View style={SS.bar_text}>{layout}</View>
          <View style={SS.bar_icon}>{suffix}</View>
        </View>
      </SafeArea>
    );
  }
}

export const SS = StyleSheet.create({

  safe: {
    paddingTop: statusBarHeight,
  },

  bar: {
    height: 45,
    // paddingHorizontal: 20,
    flexDirection: "row",
    alignItems: "center",
    borderColor: "#f5f5f5",
    borderBottomWidth: 1,
  },
  bar_icon: {
    flexShrink: 0,
    flexDirection: "row",
    alignItems: "center",
    minWidth: 45,
  },
  bar_icon_back: {
    paddingLeft: 20,
    height: 45,
    minWidth: 45,
    position: "relative",
    flexDirection: "row",
    alignItems: "center",
  },
  bar_icon_back_bg: {
    position: "absolute",
    width: 45,
    height: 45,
    borderRadius: 45,
    backgroundColor: "#ccc",
  },
  bar_icon_back_ico: {
    width: 10,
    height: 10,
    alignItems: "center",
    justifyContent: "center",
    borderTopWidth: 1.6,
    borderLeftWidth: 1.6,
    borderColor: "#3b3b3b",
    transform: [{ rotate: '-45deg' }],
  },
  bar_text: {
    flexGrow: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  bar_text_t: {
    fontSize: 16,
    color: "#000",
    fontWeight: "500",
  },

});

export function MayINeedHelp (element) {
  return !element || (!element.props);
}

export const Debounce = (fn, wait) => {
  let timerId = null;
  return function fnc (...args) {
    if (timerId !== null) clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), wait || 1000);
  }
}